<!-- 登录/注册 -->
<template>
	<view class="content page">
		<status-bar :title='type == 0 ? "注册" : "登录"'></status-bar>
		<view class="kite-bind-case">
			<view class="kite-bind-title">
				<text>{{type == 0 ? "注册" : "登录"}}</text>
			</view>
		</view>
		<view class="kite-bind-case" style="margin-top: 40upx;">
			<view class="kite-phone-case flex-box align-center">
				<text class="iconfont icon-iconzhengli_shouji"></text>
				<view class="kite-bind-input flex">
					<input type="number" class="inputPhone" v-model="phoneNumber" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
		</view>
		<view class="kite-bind-case">
			<view class="kite-email-case flex-box align-center">
				<text class="iconfont icon-mima1"></text>
				<view class="kite-bind-input flex">
					<input type="password" class="inputPhone" v-model="password" placeholder="请输入密码" />
				</view>
			</view>
		</view>
		<view class="kite-bind-case" v-if="type == 0">
			<view class="kite-email-case flex-box align-center">
				<text class="iconfont icon-mima1"></text>
				<view class="kite-bind-input flex">
					<input type="password" class="inputPhone" v-model="cfmPassword" placeholder="请确认密码" />
				</view>
			</view>
		</view>
		<view class="kite-bind-case" v-if="type == 0">
			<view class="kite-email-case flex-box align-center">
				<text class="iconfont icon-xinfeng"></text>
				<view class="kite-bind-input flex">
					<input type="number" class="inputPhone" v-model="phoneCode" placeholder="请输入验证码" />
					<!-- #ifdef MP -->
					<button class="kite-codeBtn" open-type='getUserInfo' @click="getuserinfo_toutiao(0)" @getuserinfo='getuserinfo_(0)'>{{codeTxt}}</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="kite-codeBtn" @click="getCode">{{codeTxt}}</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="kite-bind-case">
			<!-- #ifdef MP -->
			<button class="submitBtn btn3 thmeBg" :style="{'--color': color}" @click="getuserinfo_toutiao(1)" open-type='getUserInfo' v-if="type == 0" @getuserinfo='getuserinfo_(1)'>注册</button>
			<button class="submitBtn btn3 thmeBg" :style="{'--color': color}" @click="getuserinfo_toutiao(2)" open-type='getUserInfo' v-if="type == 1" @getuserinfo='getuserinfo_(2)'>登录</button>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<view class="submitBtn btn3 thmeBg" :style="{'--color': color}" @click="unMpBindPhone" v-if="type == 0">注册</view>
			<view class="submitBtn btn3 thmeBg" :style="{'--color': color}" @click="unMpLogin" v-if="type == 1">登录</view>
			<!-- #endif -->
			
			<view style="text-align: center;margin-top: 30upx;margin-bottom: 40upx;">
				<text @click="chkType(0)" v-if="type == 1" class="thmeColor" :style="{'--color': color}" style="text-decoration: underline;">还没有账号，去注册</text>
				<text @click="chkType(1)" v-if="type == 0" class="thmeColor" :style="{'--color': color}" style="text-decoration: underline;">已有账号，直接登录</text>
			</view>
		</view>
		<!-- #ifndef H5 -->
		<view class="kite-bind-case" v-if='userinfo_'>
			<!-- 没有用户信息时不显示快捷登录避免两次授权 -->
			<view class="kite-bind-onekey">
				<!-- 获取不了手机号暂时注释 -->
				<!-- <button class="kite-onekey-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">{{type == 0?'一键注册':'快捷登录'}}</button> -->
			</view>
		</view>
		<!-- #endif -->
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='1'></showModel>
		
		<Coupon v-if="CouponShow && couponArry" :couponArry="couponArry" @closeFunc="closeFunc"></Coupon>
	</view>
</template>
<script>
	var timer,that;
	import API from '../../api/index.js'
	import Coupon from "../../components/Coupons.vue"
	export default {
		components:{Coupon},
		data() {
			return {
				color: getApp().globalData.color,
				phoneNumber: '',
				phoneCode: '',
				codeTxt: '获取验证码',
				openid: uni.getStorageSync('openid'),
				openid: 1111,
				act_id: '',
				session_key: '',
				showbtn: true,
				share_V_id: uni.getStorageSync("share_v_id"),
				vid: uni.getStorageSync('vid'),
				showModal: false, // 是否显示模态框
				bid: uni.getStorageSync('bid'),
				type: 1, // 1登录 0注册
				password: "",
				cfmPassword: "",
				disabled: true,
				userinfo_: false, // 是否已经授权 true已授权
				CouponShow: false,
				couponArry:''
			}
		},
		onShow() {
			that = this
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(e) {
			that = this
			if (e.type)
				this.type = e.type;
			if (this.type == 0) {
				uni.setNavigationBarTitle({
					title: '账号注册'
				})
			}
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '账号登录'
				})
			}
			this.session_key = uni.getStorageSync('session_key');
			if (!this.openid || !uni.getStorageSync('userinfo')) {
				API.user.getOpenid().then(openid=>{
					that.openid = openid
				})
			} else {
				that.userinfo_ = true;
			}
		},
		methods: {
			chkType(n) {
				this.type = n;
				if (this.type == 0) {
					uni.setNavigationBarTitle({
						title: '账号注册'
					})
				}
				if (this.type == 1) {
					uni.setNavigationBarTitle({
						title: '账号登录'
					})
				}
			},
			getPhoneNumberHandler(e) {
				const info = uni.getStorageSync('userinfo');
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					that.$http.post({
						url: '/zzj_singleSaleApi/authorizedLogin',
						data: {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							session_key: that.session_key,
							bid: that.bid,
							share_v_id: that.share_V_id, //分享id
							openid: that.openid, //openid
							nickName: info.nickName, //暱稱
							headimg: info.avatarUrl, //頭像
							sex: info.gender, //性別
							city: info.city,
							country: info.country, //國家
							province: info.province, //省份
						}
					}).then(res => {
						if (res.status) {
							that.showbtn = false;
							uni.setStorage({
								key: "vid",
								data: res.v_id
							})
							that.showModal = true;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							})
						}
					})
				}
			},
			getuserinfo_toutiao(type){
				// #ifdef MP-TOUTIAO
				tt.login({
				  force: true,
				  success(res) {
					  tt.getUserInfo({
						withCredentials: true,
						success(res) {
						  uni.setStorage({
						  	key: "userinfo",
						  	data: res.userInfo,
						  	success() {
								if(type == 0){
									that.getCode();
								}
						  		if(type == 1){
						  			that.unMpBindPhone();
						  		}
								if(type == 2){
						  			that.unMpLogin();
						  		}
								that.userinfo_ = true
						  	}
						  })
						}
					})
				  }
				})
				// #endif
			},
			getuserinfo_(type) {
				uni.getUserInfo({
					withCredentials: true,
					success: function(res) {
						uni.setStorage({
							key: "userinfo",
							data: res.userInfo,
							success() {
								if(type == 0){
									that.getCode();
								}
								if(type == 1){
									that.unMpBindPhone();
								}
								if(type == 2){
									that.unMpLogin();
								}
								that.userinfo_ = true
							}
						})
					},
				})
			},
			getCode: function() {
				if (that.phoneNumber == '') {
					uni.showToast({
						title: '手机号码不能为空!',
						icon: "none",
						duration: 2000
					})
					return
				}
				if (!that.$reg.phone.test(that.phoneNumber) && that.phoneNumber != '') {
					uni.showToast({
						title: '手机号码格式不正确!',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let count = 60;
				if (that.disabled) {
					that.$http.post({
						url: '/zzj_singleSaleApi/verCode',
						data: {
							phone: that.phoneNumber,
							act_id: that.act_id,
						}
					}).then(res => {
						if (res.status) {
							that.codeTxt = '获取验证码';
							that.disabled = false;
							timer = setInterval(() => {
								if (count > 0) {
									count -= 1;
									that.codeTxt = '重新发送(' + count + 's)'
								} else {
									that.codeTxt = '获取验证码';
									clearInterval(timer);
									that.disabled = true;
								}
							}, 1000)
						}
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					})
				}
			},
			 /** 注册 **/
			unMpBindPhone: function() {
				if (!that.phoneNumber || that.phoneNumber == ' ') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return
				}
				if (!that.$reg.phone.test(that.phoneNumber) && that.phoneNumber != '') {
					uni.showToast({
						title: '手机号码格式有误 ~',
						icon: "none"
					});
					return
				}
				if (!that.phoneCode || that.phoneCode == ' ') {
					uni.showToast({
						title: '验证码不能为空',
						icon: "none"
					});
					return
				}
				if (that.password != that.cfmPassword) {
					uni.showToast({
						title: "密码输入不一致~",
						icon: "none"
					});
					return
				}
				const info = uni.getStorageSync('userinfo');
				let param = {
					bid: that.bid,
					openid: that.openid,
					phone: that.phoneNumber,
					password: that.password,
					verCode: that.phoneCode,
					nickName: info.nickName, //暱稱
					headimg: info.avatarUrl, //头像
					city: info.city, // 城市
					sex: info.gender, //性別
					country: info.country, //國家
					province: info.province, //省份
					share_v_id: that.share_V_id, //分享id
				}
				that.$http.post({
					url: '/zzj_singleSaleApi/fastApp',
					data: param
				}).then(res => {
					if (res.errcode == 100) {
						if(res.coupon && res.coupon.status == 1){ // 1 有券  0 无券
							that.couponArry = true
							that.CouponShow = res.coupon.data
						}else{
							uni.navigateBack({
								delta:1
							})
						}
						// that.showModal = true;
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			closeFunc() {
				that.CouponShow = false
				uni.navigateBack({
					delta:1
				})
			},
			/** 登录 **/
			unMpLogin: function() {
				if (!that.phoneNumber || that.phoneNumber == ' ') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return
				}
				if (!that.$reg.phone.test(that.phoneNumber) && that.phoneNumber != '') {
					uni.showToast({
						title: '手机号码格式有误！',
						icon: "none"
					});
					return
				}
				if (!that.password || that.password == ' ') {
					uni.showToast({
						title: '请输入密码！',
						icon: "none"
					});
					return
				}
				let param = {
					bid: that.bid,
					openid: that.openid,
					phone: that.phoneNumber,
					password: that.password
				}
				that.$http.post({
					url: '/zzj_singleSaleApi/fastLogin',
					data: param
				}).then(res => {
					if (res.v_id) {
						uni.navigateBack({
							delta:1
						})
						uni.setStorageSync("vid", res.v_id);
					}
						
					if (res.errcode == 101) {
						uni.showToast({title: res.msg,icon: "none"})
					}
					if(res.reLoginCode){
						param.reLoginCode = res.reLoginCode
						that.$http.post({
							url: '/zzj_singleSaleApi/fastLogin',
							data: param
						}).then(res1 => {
							if (res1.errcode == 100) {
								uni.showToast({
									title: res1.msg,
									icon: "none"
								});
								uni.setStorageSync("vid", res1.v_id);
								setTimeout(function() {
									uni.navigateBack({
										delta:1
									})
								}, 1000);
							} else {
								uni.showToast({
									title: res1.msg,
									icon: "none"
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.kite-bind-case {
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.kite-phone {
		position: absolute;
		left: 0;
		width: 15%;
		height: 100upx;
		text-align: center;
	}

	.kite-phone image {
		width: 40upx;
		height: 40upx;
		margin: 30upx 0;
	}
	.btn3 {
		width: 650upx;
		height: 88upx;
		line-height: 88upx;
	}

	.submitBtn.btn3 {
		margin-top: 40upx;
	}

	.kite-bind-tips {
		width: 100%;
		height: 50upx;
		font-size: 24upx;
		font-weight: 400;
		color: #ff4b4e;
		letter-spacing: 2upx;
		margin-top: 40upx;
		margin-left: 60upx;
	}

	.kite-onekey-btn {
		background: #FFFFFF;
		font-size: 28upx;
		font-weight: 400;
		color: #333333;
		text-align: center;
	}

	.kite-codeBtn {
		position: absolute;
		right: 0;
		line-height: 70upx;
		width: 160upx;
		text-align: center;
		color: #999;
		border-radius: 16upx;
		height: 70upx;
		float: right;
		border: 2upx solid #DDDDDD;
		font-size: 22upx;
		z-index: 8;
		bottom: 20upx;
	}

	.kite-bind-input {
		position: relative;
		height: 120upx;
		margin-left: 30upx;
		padding: 20upx 0;
		border: none;
	}

	.kite-bind-input:before {
		position: absolute;
		content: '';
		bottom: 0;
		background: #999999;
		width: 100%;
		height: 2upx;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.kite-phone-case,
	.kite-email-case {
		position: relative;
		width: 100%;
		height: 140upx;
		padding: 10upx 0;
	}

	.kite-bind-case {
		padding: 0 50upx;
	}

	.kite-bind-title {
		width: 100%;
		font-size: 36upx;
		line-height: 82upx;
		color: #666666;
		text-align: center;
		letter-spacing: 4upx;
		font-weight: bold;
		padding-top: 90rpx;
	}

	.kite-bind-title text {
		color: #666666;
		font-size: 36upx;
	}

	.kite-case {
		margin-top: 60upx;
		width: 100%;
		height: 80upx;
	}

	.kite-one-button {
		width: 690upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background: #FF4400;
		border-radius: 200upx;
		margin: 0 auto;
		font-size: 24upx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}

	.inputText {
		width: 100%;
		padding: 0 30upx;
	}

	.inputBox,
	.inputNumber {
		width: 100%;
		height: 80upx;
	}

	.inputBox,
	.submitBtn {
		margin-top: 60upx;
	}

	.inputNumber {
		position: relative;
		border: none;
		/* border: 1upx solid #999999; */
		border-radius: 64upx;
		line-height: 80upx;
		padding: 0 30upx;
		margin-bottom: 40upx;
	}

	.inputNumber:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.inputPhone {
		width: 100%;
		float: left;
		height: 48upx;
		margin-top: 16upx;
		margin-left: 20upx;
	}

	.inputCode .inputPhone {
		width: calc(50% - 30upx);
	}

	.inputCode {
		padding-right: 0;
	}

	.codeBtn {
		width: calc(50% - 30upx);
		text-align: center;
		color: #FFFFFF;
		border-radius: 0 64upx 64upx 0;
		background: #FF4400;
		height: calc(100% + 2upx);
		float: right;
		border: 2upx solid #ff4b4e;
	}
	.iconfont{
		font-size: 46rpx;
		color: #666;
		width: 46rpx;
		text-align: center;
	}
</style>
